<template>
    <div>
        <h2>HOME PAGE</h2>
        <p>{{name}}</p>
        <h4>message: {{message}}</h4>
        <h4>info.message: {{info.message}}</h4>
        <button @click="changeLang">changeLang</button>
    </div>
</template>

<script>
import { ref, reactive } from "vue"
export default {
    name: "Home",
    setup() {
        //refAPI会返回一个可变的响应式对象,该对象作为一个响应式的引用,维护着它内部的值
        let message = ref("你好世界");
        //在模版中引用ref值的时候,vue会自动的帮我们进行解包的操作,所以我们并不需要在模版中通过ref.value的方式来使用
        //但是在setup函数内部,它依然是一个ref的引用,所以我们要对其进行操作时,已然要使用ref.value的方法
        console.log(message.value)

        function changeLang(){
            message.value = "Hello World"
        }

        return{
            name: "哈哈",
            message,
            changeLang
        }
    },
}
</script>

<style scoped>

</style>